<script>
    export default{
        inheritAttrs:false
    }
</script>
<script setup>
import { defineProps, ref, defineEmits,watch } from 'vue';
import dropDownListVue from './dropDownList.vue';
const props = defineProps({
    placeholder: {
        type: String
    },
    modelValue: {
        require: true
    },
    disabled:{
        type:Boolean,
        default:false
    },
    check:{
        type:RegExp,
        default:null
    },
    tip:{
        type:String,
        default:null
    },
    tipDiraction:{
        type:String,
        default:'bottom'
    }
})

let emits = defineEmits(['update:modelValue','enter'])
let isFocus = ref(initIsfocus())
function initIsfocus(){
    let value=props.modelValue
    switch(typeof(value)){
        case 'string':
            if(value.length>0){
                return true
            }else{
                return false
            }
            break;
        case 'number':
            if(value==0){
                return false
            }else{
                return true
            }
            break;
        default:
            return false
    }
}
function focus() {
    if (!isFocus.value) {
        isFocus.value = true
    }
}
function blur($event) {
    checkInput($event)
    if ($event.target.value.length == 0) {
        isFocus.value = false
    }
}


//防抖
let keyUpTimmer;
function confirmInput(){
    if(typeof(keyUpTimmer)=='undefined'){
        emits('enter')
        keyUpTimmer=setTimeout(()=>{keyUpTimmer=undefined},500)
    }
}

//

watch(props,(props)=>{
    isFocus.value = initIsfocus()
})


//输入不符合规则
let inputBodyDom=ref(null)
let inputDom=ref(null)
//控制tips显示
let tipsDom=ref(null)
function checkInput($event){
    if(props.check!=null && !props.check.test(props.modelValue)){
        //添加error
        inputBodyDom.value.setAttribute('error','')
        //获取焦点
        inputDom.value.focus()
        //获取元素样式的动画时间
        const transitionDuraton=window.getComputedStyle(inputBodyDom.value).animationDuration
        console.log(transitionDuraton);
        let duration;
        if(/ms$/g.test(transitionDuraton)){
            duration=parseFloat(transitionDuraton)
        }else if(/s$/g.test(transitionDuraton)){
            duration=parseFloat(transitionDuraton)*1000
        }
        setTimeout(() => {
            inputBodyDom.value.removeAttribute('error')
        }, duration);

        //显示tips
        if($event){
            tipsDom.value.show($event,props.tipDiraction)
        }
    }
}
</script>

<template>
    <div style="display:inline-block" >
        <dropDownListVue v-if="props.tip!=null" ref="tipsDom">
            {{ props.tip }}
        </dropDownListVue>
        <div class="inputBody" ref="inputBodyDom">
            <slot></slot>
            <div class="input">
                <input v-bind="$attrs" v-bind:value="modelValue"
                    ref="inputDom"
                    @input="$event=>emits('update:modelValue',$event.target.value)" @focus="focus($event)"
                    @blur="blur($event)"
                    @keyup.enter="confirmInput"
                    :disabled="props.disabled"
                    >
                <span class="placeholder" :class="isFocus ? 'focus' : ''">
                    {{ props.placeholder }}
                </span>
            </div>
        </div>
    </div>
</template>

<style scoped>
.inputBody {
    position: relative;
    display: inline-block;
    /* border-bottom: .2em solid var(--color-text-third); */
    margin-top: 1em;
    background-color: transparent;
    display: flex;
    align-items: center;
}

.inputBody:hover::before {
    background-color: var(--color-theme);
}

.input {
    display: inline-block;
    position: relative;
}

.inputBody::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: .1em;
    border-radius: 1em;
    transition: all .3s;
    background-color: var(--color-text-third);
}
.inputBody[error]::before{
    background-color: red;
}

.placeholder {
    position: absolute;
    display: inline-block;
    color: var(--color-text-third);
    left: 0%;
    top: 50%;
    transform: translateY(-60%);
    transition: all .3s;
    font-size: .8em;
    /* background-color: inherit; */
    margin-left: .5em;
    user-select: none;
    pointer-events: none;
    /* padding: 0 .5em; */
}

input {
    border: 0;
    background: transparent;
}

.focus {
    top: -.5em;
    font-size: .5em;
}
</style>